<template>
  <div>
      <!-- 查询条件 -->
      <div class="orderactivity-header">
        <div class="assign-header">
          <div>搜索人脸设备老人列表</div>
          <i class="el-icon-close" style="font-size: 20px; color: #72767b;" @click="close"></i>
        </div>
      </div>
      <el-divider></el-divider>
      <!-- Table组件 -->
       <div class="contacts-content">
         <main-table :columns="columns" :data="tableList" :pagination="pagination" @getData="fetchTableList" :loading="loading" wrapperHeight="100%" height="calc(100% - 20px)">
           <!-- wrapperHeight：父元素高度根据实际布局情况配置，大多情况可能是 外层祖父元素高度 减去 其他兄弟元素的高度，如果外层祖父元素高度或者兄弟元素的高度不固定，可能需要借助 js来计算 -->
           <el-table-column slot="action" fixed="right" label="操作" width="100">
             <template slot-scope="scope">
               <el-button type="text" class="button-edit-color" @click="edit(scope.row)"><i class="fa fa-check" aria-hidden="true"></i> 确定</el-button>
             </template>
           </el-table-column>
         </main-table>
      </div>
  </div>
</template>

<script>
import * as APIDailycare from '@/api/dailycare'
import mainTable from "@/components/main-table/index";
export default {
  name: 'activity-older',
  props: {
    name: {
      type: String,
      default: ''
    }
  },
  components: {
    mainTable
  },
  data () {
    return {
      tableList: [],
      pagination: {
        current: 1,
        size: 15,
        total: 0
      },
      // 表格loading
      loading: false,
      columns: [
        {
          index: true,
          fixed: true
        },
        {
          prop: 'id',
          label: '老人ID'
        },
        {
          prop: 'name',
          label: '老人姓名'
        },
        {
          prop: 'idcard',
          label: '身份证号'
        },
        {
          prop: 'jifen',
          label: '积分'
        },
        {
          prop: 'msg',
          label: '备注'
        },
        {
          slot: 'action'
        }
      ]
    }
  },
  mounted () {
    this.fetchTableList()
  },
  methods: {
    // 添加家属后重载
    load () {
      this.fetchTableList()
    },
    fetchTableList (pageObj) {
      this.loading = true
      this.searchForm = {
        ...this.searchForm,
        ...pageObj,
        ...{ name: this.name }
      }
      APIDailycare.riolderList(this.searchForm).then((res) => {
        const { list = [], total = 0 } = res
        this.tableList = list || []
        this.pagination.total = total
      }).finally(() => {
        this.loading = false
      })
    },
    edit (row) {
      this.$emit('sure', row)
      this.close()
    },
    close () {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
  .assign-header {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
  }
  .orderactivity-header{
     padding: 20px;
     padding-bottom: 0px;
  }
  .contacts-content {
   padding: 0 20px;
   padding-bottom: 7px;
  }
</style>
